<?php
    session_start();
    if(!isset($_SESSION['loggedin'])) header('Location: index.php');
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <title>TestYourSelf - Start</title>

    <!-- Bootstrap core CSS -->
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/quiz.css" rel="stylesheet">
    <link href="css/template.css" rel="stylesheet">

    <script type="text/javascript">
        var progresscount= 0;
        var qcount = 0;
        var countedquestions = new Array();
        function cancel_alert(node) {
            return confirm("Achtung! Das Quiz wird dadurch abgebrochen!");
        }

        function startquiz(){
            qcount =  document.getElementById("questioncount").value;
            document.getElementById("progresstext").innerHTML="0 von "+String(qcount)+" beantwortet";
            document.getElementById("quizprogress").style.width="0%";
        }

        function addprogress(objId){
            if(countedquestions.indexOf(objId)<0){
                countedquestions.push(objId);
                progresscount++;
                var percentage = (progresscount / qcount)*100;
                document.getElementById("quizprogress").style.width=String(percentage)+"%";
                document.getElementById("progresstext").innerHTML=String(progresscount)+" von "+String(qcount)+" beantwortet";
            }
        }
    </script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body onload="startquiz()">

<div class="site-wrapper">

    <div class="site-wrapper-inner">

        <div class="infobox panel panel-default hidden-xs">
            <div class="panel-heading">Fortschritt</div>
              <div class="panel-body">
                <div class="progresstext" id="progresstext">0 von</div>
                <div class="progress progress-striped active">
                      <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;" id="quizprogress">
                      </div>
                </div>
              </div>

        </div>
        <div class="cover-container">

            <div class="masthead clearfix">
                <div class="inner">
                    <h3 class="masthead-brand">TestYourSelf</h3>
                    <ul class="nav masthead-nav">
                        <li class="active"><a href="select.php" onclick="return cancel_alert(this);">Start</a></li>
                        <li><a href="highscore.php" onclick="return cancel_alert(this);">Highscore</a></li>
                        <li><a href="profil.php" onclick="return cancel_alert(this);">Profil</a></li>
                        <li><a href="logout.php" onclick="return cancel_alert(this);">Logout</a></li>
                        <?php if(isset($_SESSION['isadmin']) && $_SESSION['isadmin']=="true"){ ?>
                        <li><a href="admin.php" onclick="return cancel_alert(this);">Administration</a></li>
                        <?php } ?>
                    </ul>
                </div>
            </div>


            <div class="inner cover">
                <h1 class="cover-heading">Quiz</h1>
                <form class="form-quiz" role="form" action="result.php" method="post">

                <?php
                if(!empty($_POST['severity'])){
                    list($severity_id, $category_id) = explode("-", $_POST['severity'], 2);

                    if ($severity_id == 0) $jsonurl = "http://localhost:8080/TestYourselfASE/rest/question/".$category_id;
                    else $jsonurl = "http://localhost:8080/TestYourselfASE/rest/question/".$category_id."/".$severity_id;
                    $jsonfile = file_get_contents($jsonurl);
                    $json = json_decode($jsonfile);
                    $i=1;
                    $questionlist = "";
                    foreach($json as $obj){
                           if ($i==1) $questionlist = $obj->Id;
                           else    $questionlist = $questionlist."-".$obj->Id;
                ?>

                        <div class="question-heading"><?php echo $obj->Name; ?></div>
                        <div class="question">

                        <div class="firstrow">
                            <label>
                                <?php
                                echo '<input type="radio" name="optionsQ'.$obj->Id.'" id="optionsRadios2" value="1" class="radiob" >';
                                echo '<span class="btn btn-default" onclick="addprogress('.$obj->Id.')">'.$obj->Option1.'</span>';
                                ?>
                            </label>
                            <label >
                                <?php
                                echo '<input type="radio" name="optionsQ'.$obj->Id.'" id="optionsRadios2" value="2" class="radiob">';
                                echo '<span class="btn btn-default" onclick="addprogress('.$obj->Id.')">'.$obj->Option2.'</span>';
                                ?>
                            </label>
                        </div>
                        <div class="secondrow">
                            <label >
                                <?php
                                echo '<input type="radio" name="optionsQ'.$obj->Id.'" id="optionsRadios2" value="3" class="radiob">';
                                echo '<span class="btn btn-default" onclick="addprogress('.$obj->Id.')">'.$obj->Option3.'</span>';
                                ?>
                            </label>
                            <label >
                                <?php
                                echo '<input type="radio" name="optionsQ'.$obj->Id.'" id="optionsRadios2" value="4" class="radiob">';
                                echo '<span class="btn btn-default" onclick="addprogress('.$obj->Id.')">'.$obj->Option4.'</span>';
                                ?>
                            </label>
                        </div>

                        </div>
                <?php   echo '<input type="hidden" name="severityQ'.$obj->Id.'" value="'.$obj->Severity.'">';
                        $i=$i+1; }

                        echo ' <input type="hidden" name="questioncount" value="'.($i-1).'" id="questioncount">';
                        echo ' <input type="hidden" name="questionlist" value="'.$questionlist.'">';
                        echo ' <input type="hidden" name="severity" value="'.$severity_id.'-'.$category_id.'">';
                        echo ' <input type="hidden" name="category" value="'.$category_id.'">';
                        echo ' <input type="hidden" name="scenario" value="'.$_POST["scenario"].'">';
                ?>
                        <button class="btn btn-lg btn-primary btn-block" type="submit">Absenden</button>
                <?php  }


                ?>

                    </form>

            </div>

            <div class="mastfoot">
                            <div class="inner">
                                <p>by Christoph Schuster, Martin Schmied, Thomas Stoellner, Philipp Taeubel</p>
                            </div>
                        </div>

        </div>

    </div>

</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

